<template>
  <div class="canvas-area">
    <!-- 主编辑区 -->
    <div class="editor-area" ref="editorArea">
      <div class="canvas-container" :style="canvasStyle">
        <div class="canvas-content" :style="contentStyle" @mousedown="$emit('clear-selection', $event)">
          <!-- 组件渲染 -->
          <template v-for="component in components" :key="component.id">
            <div 
              class="canvas-component"
              :class="{ 'is-selected': selectedComponent?.id === component.id }"
              :style="component.style"
              @mousedown.stop="$emit('mousedown', component, $event)"
            >
              <div class="component-content-wrapper">
                <slot :component="component" />
              </div>
              
              <!-- 缩放控制器 -->
              <div class="resize-handles" v-if="selectedComponent?.id === component.id">
                <div class="resize-handle tl" @mousedown.stop="$emit('resize-start', 'tl', $event)"></div>
                <div class="resize-handle tm" @mousedown.stop="$emit('resize-start', 'tm', $event)"></div>
                <div class="resize-handle tr" @mousedown.stop="$emit('resize-start', 'tr', $event)"></div>
                <div class="resize-handle ml" @mousedown.stop="$emit('resize-start', 'ml', $event)"></div>
                <div class="resize-handle mr" @mousedown.stop="$emit('resize-start', 'mr', $event)"></div>
                <div class="resize-handle bl" @mousedown.stop="$emit('resize-start', 'bl', $event)"></div>
                <div class="resize-handle bm" @mousedown.stop="$emit('resize-start', 'bm', $event)"></div>
                <div class="resize-handle br" @mousedown.stop="$emit('resize-start', 'br', $event)"></div>
              </div>

              <!-- 选中信息 -->
               <div class="selection-info" v-if="selectedComponent?.id === component.id">
                <span>{{ Math.round(parseInt(component.style.width)) }} x {{ Math.round(parseInt(component.style.height)) }}</span>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  components: Array,
  selectedComponent: Object,
  showRuler: { type: Boolean, default: true },
  showGrid: { type: Boolean, default: true },
  canvasStyle: Object,
  contentStyle: Object,
  pageConfig: Object,
  scale: { type: Number, default: 100 }
})

const emit = defineEmits(['mousedown', 'resize-start', 'clear-selection', 'update:showGrid'])

const editorArea = ref(null)
</script>

<style scoped>
.canvas-area {
  flex: 1;
  background-color: #18181c;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* 编辑区 */
.editor-area {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.canvas-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
  min-height: 0;
}

.canvas-content {
  width: 1920px;
  height: 1080px;
  background: #101d36;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  border-radius: 8px;
  position: relative;
}

/* 组件 */
.canvas-component {
  position: absolute;
  cursor: move;
  background: rgba(64, 158, 255, 0.2) !important; /* 强制显示蓝色背景 */
  border: 2px solid rgba(64, 158, 255, 0.5) !important; /* 强制显示蓝色边框 */
  border-radius: 4px;
  transition: all 0.3s;
  min-width: 20px;
  min-height: 20px;
  z-index: 100 !important; /* 确保在最上层 */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
  /* 调试样式 */
  outline: 1px solid red !important;
}

.canvas-component:hover {
  background: rgba(64, 158, 255, 0.3) !important;
  border-color: rgba(64, 158, 255, 0.8) !important;
  box-shadow: 0 0 0 1px rgba(64, 158, 255, 0.3);
}

.component-content-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 确保内容可见 */
  background: rgba(255, 255, 255, 0.1);
}

.canvas-component.is-selected {
  outline: 3px solid #409eff !important;
  border-color: #409eff !important;
  background: rgba(64, 158, 255, 0.2) !important;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

/* 缩放控制器 */
.resize-handles {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
}
.resize-handle {
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: #fff;
  border: 1px solid #409eff;
  border-radius: 50%;
  pointer-events: all;
  transform: translate(-50%, -50%);
}
.resize-handle.tl { top: 0; left: 0; cursor: nwse-resize; }
.resize-handle.tm { top: 0; left: 50%; cursor: ns-resize; }
.resize-handle.tr { top: 0; right: -8px; cursor: nesw-resize; }
.resize-handle.ml { top: 50%; left: 0; cursor: ew-resize; }
.resize-handle.mr { top: 50%; right: -8px; cursor: ew-resize; }
.resize-handle.bl { bottom: -8px; left: 0; cursor: nesw-resize; }
.resize-handle.bm { bottom: -8px; left: 50%; cursor: ns-resize; }
.resize-handle.br { bottom: -8px; right: -8px; cursor: nwse-resize; }

/* 选中信息 */
.selection-info {
  position: absolute;
  bottom: -24px;
  left: 0;
  background-color: #2d2f34;
  color: #a9a9a9;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
}
</style> 